<html data-framework="vue">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>烟月不知人事改</title>
    <link href="static/semantic.min.css" rel="stylesheet">
    <link href="static/style.css" rel="stylesheet">
  </head>

  <body>
    <div id="app" class="ui equal width container divided grid">
      <div id="show"  class="column" style="height: 100%;">
      <div style="margin-top: 14px;width: 100%; height: 35px;">
        <div style="float: right;">
        <i @click="mode('preview')" class="large grey maximize icon"></i>
        <i @click="recle('preview')" class="large grey arrow circle left icon" style="display: none;"></i>
        </div>
      </div>
          <div class="fs">{{title}}<br /><br />{{content}}</div>
      </div>
      <div id="edit" class="column" style="height: 100%;">
        <div id="quickmenu" style="margin-top: 14px;width: 100%; ">
        <div style="float: right;">
            <i @click="newPost()" class="large shuimo plus icon"></i>
            <div class="ui floating dropdown icon">
            <i class="large list icon"></i>
            <div class="menu">
              <div id="search" class="ui icon search input">
                <i class="search icon"></i>
                <input type="text" placeholder="搜索">
              </div>
              <div class="divider"></div>
              <div class="header">
                <template v-if="posts.length > 0">
                  列表
                  <span style="float: right;" class="grey text" @click="clear()">清空</span>
                </template>
                <template v-else >
                  无历史
                  <span style="float: right;" class="grey text" @click="load()">载入名诗</span>
                </template>
              </div>
              <div id="posts" v-if="posts.length > 0" class="left kaiti scrolling menu">
                <div class="item" @click="editPost(post)" v-for="post in posts">
                  <div class="right floated content">
                    <i @click="removePost(post)" class="grey remove icon"></i>
                  </div>
                  <div class="content">
                    <div class="ui grey empty circular label"></div>
                    {{ post.title|default_if_none|slice }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        <div class="ui form" style="margin-top: 28px;">
          <div class="field">
    	      <div id="title" class="ui large input">
    		      <input v-model="title" type="text" placeholder="无题">
    		    </div>
    	    </div>
          <div class="fluid field">
           	<textarea v-model="content" rows="10" placeholder="内容文"></textarea>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="static/js/vue.js"></script>
  <script src="static/js/jquery.js"></script>
  <script src="static/js/semantic.min.js"></script>
  <script>
  $('.dropdown')
      .dropdown({
        fullTextSearch: true,
      })
  ;
  
  var STORAGE_KEY = 'yanyue';

  var filters = {
      all: function (posts) {
          return posts;
      },
      valid: function (posts) {
        return posts.filter(function (post) {
          return post.title && post.content;
        })
      },
      get: function (posts, id) {
          return posts.filter(function (post) {
              return post.id === id;
          });
      }
  };

  Storage = {
    fetch: function () {
        return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
    },
    save: function (posts) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(posts));
    },
  };

  var posts = Storage.fetch();
  if (posts.length === 0) {
    posts.push({
      content: "春花秋月何时了？\n" + 
        "往事知多少？\n" + 
        "小楼昨夜又东风，\n" +
        "故国不堪回首月明中。\n" +
        "雕栏玉砌应犹在，\n" +
        "只是朱颜改。\n" +
        "问君能有几多愁？\n" +
        "恰似一江春水向东流。",
      title: "虞美人·李煜"
    })
  }

  // 过滤器
  Vue.filter('default_if_none', function (value) {
    // `input` === `this.userInput`
    if (value === "") {
      return "无标题";
    } else {
      return value;
    }
  })

  Vue.filter('slice', function (value) {
    // `input` === `this.userInput`
    if (value.length > 10) {
      return value.slice(0,10) + '...';
    } else {
      return value;
    }
  })

  var vm = new Vue({
    el: '#app',
    data: {
      editing: posts[0],
      title: posts[0].title,
      content: posts[0].content,
      posts: posts
    },
    watch: {
      posts: {
          handler: function(posts) {
            Storage.save(posts);
          },
          deep: true
      },
      content: {
          handler: function(content) {
            if (this.editing.content !== content) {
              var index = this.posts.indexOf(this.editing);
              this.editing.content = content;
              this.posts.$set(index, this.editing);
            }
         }
      },
      title: {
          handler: function(title) {
            if (this.editing.title !== title) {
              var index = this.posts.indexOf(this.editing);
              this.editing.title = title;
              this.posts.$set(index, this.editing);
            }
         }
      },
    },
    methods: {
      editPost: function(post) {
        this.editing = post;
        this.content = post.content;
        this.title = post.title;
      },
      newPost: function(post) {
        var post = { content: "", title: "" }
        this.editing = post;
        this.posts.push(post);
        this.title = post.title;
        this.content = post.content
      },
      removePost: function(post) {
        this.posts.$remove(post);
      },
      mode: function(modeName) {
        if (modeName === 'preview') { 
          $('#edit').hide();
          $('#show .maximize').toggle();
          $('#show .arrow').toggle();
        } 
        if (modeName === 'edit') {
          $('#show').hide();
        }
      },
      recle: function(modeName) {
        if (modeName === 'preview') { 
          $('#edit').show();
          $('#show .maximize').toggle();
          $('#show .arrow').toggle();
        } 
        if (modeName === 'edit') {
          $('#show').hide();
        }
      },
      load: function() {
        $.getJSON('/tang300/tang300.v0.json', function(data) { 
          $.each(data, function(index, array) {
            var ob = {
              content: array[3].join('\n'),
              title: array[1] + '·' + array[2]
            }
            vm.posts.push(ob);
          })
        });
      },
      clear: function() {
        this.posts = [];
      }
    }
  })
  </script>
 </html>
